<template>
	<view>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth=25% labelAlign="center">
			<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
				<u--input v-model="model1.userInfo.name" border="none" placeholder="请填写姓名"></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="userInfo.gender" borderBottom @click="showSex = true; hideKeyboard()">
				<u--input v-model="model1.userInfo.gender" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="住址" prop="userInfo.place" borderBottom>
				<u--input v-model="model1.userInfo.place" border="none" placeholder="请填写住址(房号)"></u--input>
			</u-form-item>
			<u-form-item label="电话号码" prop="userInfo.phone" borderBottom>
				<u--input v-model="model1.userInfo.phone" border="none" placeholder="请填写电话号码"></u--input>
			</u-form-item>
			<u-form-item label="身份证号" prop="userInfo.idCard" borderBottom>
				<u--input v-model="model1.userInfo.idCard" border="none" placeholder="请填写身份证号"></u--input>
			</u-form-item>
		</u--form>

		<u-gap height="50" bgColor="#ffffff"></u-gap>

		<u-button type="primary" text="提交" @click="realname"></u-button>

		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						gender: '',
						place: '',
						phone: '',
						idCard: ''
					},
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						min: 2,
						required: true,
						message: '请填写正确的姓名',
						trigger: ['change', 'blur']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					'userInfo.place': {
						type: 'string',
						min: 1,
						required: true,
						message: '请填写住址',
						trigger: ['change', 'blur']
					},
					'userInfo.phone': [{
							type: 'string',
							required: true,
							message: '请填写正确的电话号码',
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'userInfo.idCard': {
						type: 'string',
						len: 18,
						required: true,
						message: '请填写正确的身份证号',
						trigger: ['change', 'blur']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.gender = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			realname() {
				this.$refs.form1.validate().then(res => {
					this.$axios.post("/yz/realname", this.model1.userInfo).then(res => {
						if (res.data.code == 200) {
							uni.$u.toast('提交成功');
							uni.switchTab({
								url: "/pages/my/my"
							});
							window.location.reload();
						}
					});

				}).catch(errors => {
					this.show = true;
					uni.$u.toast('请正确填写信息！')
				})

			}
		},
	}
</script>

<style lang="scss">

</style>
